<template>
  <div class="particulars-contain">
    <van-swipe>
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <div class="imgbox">
          <img :src="image.src" />
        </div>
      </van-swipe-item>
    </van-swipe>
    <div class="explain">
      <div class="price">
        <span class="new-price">￥{{ goodsData.sell_price }}</span
        ><span class="old-price">￥{{ goodsData.market_price }}</span>
      </div>
      <div class="title">{{ goodsData.title }}</div>
    </div>
    <div class="introduce">
      <van-divider>介绍</van-divider>
      <div v-html="goodsData.content" class="abstract"></div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/shopcar')" :badge="totalNum" />

      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="
          isShow = true;
          isPurchase = false;
        "
      />
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="
          isShow = true;
          isPurchase = true;
        "
      />
    </van-goods-action>
    <!-- 商品sku -->
    <div class="popup">
      <van-popup v-model="isShow" closeable position="bottom" :style="{ height: '55%' }">
        <div class="header">
          <img :src="images[0]?.src" alt="" />
          <div class="headerinfo">
            <span class="price"><b>￥</b>{{ goodsData.sell_price }}</span>
            <span>剩余 {{ goodsData.stock_quantity }} 件</span>
            <span>请选择</span>
          </div>
        </div>
        <van-divider></van-divider>
        <div class="quantity">
          <span>购买数量</span>
          <van-stepper v-model="number" />
        </div>
        <van-divider>其他信息</van-divider>
        <div class="info">
          <span>商品货号：{{ goodsData.goods_no }}</span>
          <span>库存情况：{{ goodsData.stock_quantity }}</span>
          <span>上架时间：{{ goodsData.add_time }}</span>
        </div>
        <div class="btn">
          <van-goods-action v-if="isPurchase">
            <van-goods-action-button @click="onBuyClicked" type="danger" text="立即购买" />
          </van-goods-action>
          <van-goods-action v-else>
            <van-goods-action-button @click="onAddCartClicked" type="warning" text="加入购物车" />
            <van-goods-action-button @click="onBuyClicked" type="danger" text="立即购买" />
          </van-goods-action>
        </div>
      </van-popup>
    </div>
    <BackTop></BackTop>
  </div>
</template>

<script>
import { reqGetGoodsImg, reqGetParticulars, addHistory } from "@/api";
import BackTop from "@/component/BackTop.vue";
export default {
  components: {
    BackTop,
  },
  data() {
    return {
      id: this.$route.params.id,
      images: [],
      goodsData: {},
      isShow: false,
      number: 1,
      isPurchase: false,
      originalNumber: 0,
      totalNum: 0,
    };
  },
  methods: {
    storage() {
      // let shopCarList = this.$store.state.shopCarList.filter((item) => {
      //   if (item.id === this.goodsData.id) {
      //     this.originalNumber = item.number;
      //   }
      //   return item.id !== this.goodsData.id;
      // });
      // this.$store.commit("setShopCarList", shopCarList);
      let goodsdetail = {
        id: this.goodsData.id,
        isSelected: true,
        // number: this.number + this.originalNumber,
        number: this.number,
        price: this.goodsData.sell_price,
      };
      this.$store.commit("addShopCarList", goodsdetail);
      this.isShow = false;
    },
    onAddCartClicked() {
      if (!this.$store.state.token) {
        this.$router.push("/login");
        return;
      }
      this.storage();
      this.$toast("加入购物车成功");
    },
    onBuyClicked() {
      if (!this.$store.state.token) {
        this.$router.push("/login");
        return;
      }
      this.storage();
      this.$router.push(`/shopcar`);
    },
    async reqGetGoodsImg() {
      let { message } = await reqGetGoodsImg(this.$route.params.id);
      this.images = message;
    },
    async reqGetParticulars() {
      let { message } = await reqGetParticulars(this.$route.params.id);
      this.goodsData = message;
      let reg = /width="\d+(px)?"/gi;
      this.goodsData.content = this.goodsData.content.replace(reg, "");
    },
  },
  async mounted() {
    this.reqGetGoodsImg();
    this.reqGetParticulars();
    // this.$store.state.shopCarList.forEach((item) => {
    //   this.totalNum += item.number;
    // });
    // this.$store.commit("setHistoryIds", this.$route.params.id);
    if (this.$store.state.token) {
      await addHistory(this.$route.params.id);
    }
  },
  computed: {
    shopCarList() {
      return this.$store.state.shopCarList;
    },
  },
  watch: {
    shopCarList: {
      handler(newV) {
        this.totalNum = 0;
        newV.forEach((item) => {
          this.totalNum += item.number;
        });
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.particulars-contain {
  padding: 10px;

  .van-swipe {
    margin-bottom: 10px;

    .imgbox {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 256px;
      background: #fff;
      border-radius: 7px;

      img {
        width: 245px;
        max-height: 240px;
        object-fit: fill;
      }
    }
  }

  .explain {
    height: 60px;
    padding: 10px 0;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 7px;

    .price {
      .new-price {
        margin-right: 30px;
        font-size: 20px;
        color: orange;
      }

      .old-price {
        font-size: 14px;
        text-decoration: line-through;
      }
    }

    .title {
      overflow: hidden;
      font-size: 16px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .introduce {
    width: 100%;
    padding: 10px;
    background: #fff;
    border-radius: 6px;

    ::v-deep .abstract {
      font-size: 14px;
      line-height: 20px;

      img {
        width: 100%;
        max-height: 100%;
      }
    }
  }

  .van-goods-action {
    width: 100%;
  }

  .popup {
    .van-popup {
      padding: 10px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }

    .header {
      display: flex;

      img {
        width: 96px;
        height: 96px;
      }

      .headerinfo {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: 30px;
        padding-bottom: 10px;
        font-size: 12px;
        color: #969799;

        .price {
          b {
            font-size: 16px;
          }

          font-size: 22px;
          color: orange;
        }
      }
    }

    .quantity {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
    }

    .info {
      display: flex;
      flex-direction: column;

      span {
        margin: 5px 0;
        font-size: 14px;
      }
    }
  }
}
</style>
